<!-- 详情描述组件 -->
<template>
  <el-col class="info-item" v-bind="colProps">
    <div class="label">{{ label ? label + "：" : "" }}</div>
    <div class="value">
      <slot name="content" :value="data[prop]">
        <span
          v-if="formatter"
          class="default-value"
          :title="formatter(data[prop])"
        >
          {{ formatter(data[prop]) }}
        </span>
        <span v-else class="default-value" :title="data[prop]">
          {{ data[prop] }}
        </span>
      </slot>
    </div>
  </el-col>
</template>

<script>
export default {
  name: "el-info-item",
  props: {
    colProp: {
      type: Object,
      default: () => ({})
    },
    prop: {
      type: String,
      required: true
    },
    label: {
      type: String
    },
    // slot插槽#content优先级>formatter
    formatter: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      data: this.$parent.$parent.data,
      colProps: Object.assign({}, this.$parent.$parent.colProp, this.colProp)
    };
  },
  mounted() {}
};
</script>

<style scoped lang="scss">
.info-item:not(:last-child) {
  margin-bottom: 16px;
  display: flex;
  .label {
    flex-shrink: 0;
  }
  .value {
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .default-value {
    white-space: nowrap;
  }
}
</style>
